<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 976px;
            height: 550px;
        }

        .box1 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            opacity: 1;
            /* background-color: red; */
        }

        .box .box1 li {
            margin: 0 5px;
            float: left;
            list-style: none;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #fff;
        }

        .box .box1 .zzzz {
            background-color: #fff;
            scale: 1.3;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="" alt="">
        <div class="box1">
            <p></p>

            <ul>
                <li class="zzzz"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

        </div>
    </div>
    <script>
        // 1. 初始数据
        const sliderData = [
            { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ]


        let num = 0
        setInterval(function () {
            const img = document.querySelector('.box img')
            img.src = sliderData[num].url
            const box1 = document.querySelector('.box .box1')
            box1.style.backgroundColor = sliderData[num].color
            box1.style.opacity = 0.8
            const p = document.querySelector('.box .box1 p')
            p.innerHTML = sliderData[num].title
            p.style.marginLeft = '46px'
            p.style.color = 'red'
            document.querySelector(`.box .box1 ul .zzzz`).classList.remove('zzzz')
            const lili = document.querySelector(`.box .box1 ul li:nth-child(${num + 1})`)
            lili.classList.add('zzzz')
            num++
            if (num >= sliderData.length) {
                num = 0
            }

        }, 10)

    </script>
</body>

</html>